<!DOCTYPE html>
<html>
<head>
    <title>jQuery WeUI</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
    ">

    <link rel="stylesheet" href="/lib/weui.min.css">
    <link rel="stylesheet" href="/css/jquery-weui.css">
    <link rel="stylesheet" href="/css/dist.css">
    <link rel="stylesheet" href="/css/list.css">
    <style media="screen">
        #add {
            position: fixed;
            right: 15px;
            bottom: 15px;
            width: 15%;
            padding-bottom: 15%;
            background: #000;
            border-radius: 50%;
            opacity: .8;
            z-index: 9;
        }
        #add_tab_box{
            position: absolute;
            display: block;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            text-align: center;
        }
        #add_tab{
            display: table;
            width: 100%;
            height: 100%;
        }
        #add_tab_cell{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            color: #FFF;
            font-size: 1.5rem;
        }
    </style>
</head>

<body ontouchstart data-token="<%= docs.token %>">


    <header class='demos-header'>
        <h1 class="demos-title">价格列表</h1>
    </header>
    <% if(docs.price.length){ %>
    <div id="list_box" class="bd">
    <%}else{%>
    <div id="list_box" class="bd" style="display: none;">
    <%}%>
      <div class="page__bd">
        <div class="weui-cells" id="list">

          <% for(var i = 0; i < docs.price.length; i++){ %>
              <div class="weui-cell weui-cell_swiped">
                <div class="weui-cell__bd">
                  <div class="weui-cell">
                    <div class="weui-cell__bd">
                      <p>¥ <%= docs.price[i] / 100 %> 元</p>
                    </div>
                    <div class="weui-cell__ft">左滑删除</div>
                  </div>
                </div>
                <div class="weui-cell__ft">
                  <a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:remove(<%= i %>)">删除</a>
                </div>
              </div>
          <%}%>

        </div>
      </div>
    </div>
    <% if(docs.price.length){ %>
    <div id="listNull" class="weui-loadmore" style="display: none;">
    <% }else{ %>
    <div id="listNull" class="weui-loadmore">
    <%}%>
        <span id="loadingText" class="weui-loadmore__tips">该商户还没有设置价格</span>
    </div>
    <div id="add">
        <div id="add_tab_box">
            <div id="add_tab">
                <p id="add_tab_cell">+</p>
            </div>
        </div>
    </div>
    <div class="weui-footer" style="display:none;">
        <p class="weui-footer__links">
            <a href="/http://jqweui.com" class="weui-footer__link">jQuery-WeUI 首页</a>
        </p>
        <p class="weui-footer__text">Copyright © 2016 jqweui.io</p>
    </div>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="/lib/jquery-2.1.4.js"></script>
    <script src="/lib/fastclick.js"></script>
    <script>
    $(function() {
        FastClick.attach(document.body);
    });
    </script>
    <script src="/js/jquery-weui.js"></script>

    <script type="text/javascript">
    var jssdk = <%- JSON.stringify(docs.jssdk) %>;
    jssdk.jsApiList = ["closeWindow","hideMenuItems"];
    wx.config(jssdk);
    wx.ready(function(){
        wx.hideMenuItems({
            menuList: [
                "menuItem:editTag",
                "menuItem:delete",
                "menuItem:copyUrl",
                "menuItem:originPage",
                "menuItem:readMode",
                "menuItem:openWithQQBrowser",
                "menuItem:openWithSafari",
                "menuItem:share:email",
                "menuItem:share:brand",
                "menuItem:share:appMessage",
                "menuItem:share:timeline",
                "menuItem:share:qq",
                "menuItem:share:weiboApp",
                "menuItem:favorite",
                "menuItem:share:facebook",
                "menuItem:share:QZone"
            ] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        });
    });
    var token = $("body").data("token");
    var price = <%- JSON.stringify(docs.price) %>;
    var mid = <%= docs.mid %>;

    $(document).on("click","#add", function(){
        $.prompt({
          // text: "请输入价格",
          title: "请输入价格",
          onOK: function(text) {
            text = parseInt(text * 100);
            var next = true;
            for(var i = 0; i < price.length; i++){
                if(price[i] == text){
                    console.log(price[i],'====',text)
                    next = false;
                    break;
                }
            };
            if(!next)
                return $.toast("价格不可重复", "cancel");

            price.push(text);
            price = price.sort(function(a,b){return a-b;});

            update();

          },
          onCancel: function () {
            //点击取消
          }
        });
        $("#weui-prompt-input").attr({
            "type":"number",
            "placeholder": "单位:元"
        });
    });

    var update = function(){
        $.showLoading();

        $.ajax({
            url: "price",
            data: {
                token: token,
                mid: mid,
                price: price.join("|")
            },
            type: "post",
            dataType: "JSON",
            success: function(data){
                $.hideLoading();
                if(!price.length){
                    $("#list").html("");
                    $("#list_box").css("display","none");
                    $("#listNull").css("display","block");
                }else{
                    $("#list").html("");
                    $("#listNull").css("display","none");
                    for(var i = 0; i < price.length; i++){
                        var add = $('<div class="weui-cell weui-cell_swiped">'+
                          '<div class="weui-cell__bd">'+
                            '<div class="weui-cell">'+
                              '<div class="weui-cell__bd">'+
                                '<p>¥ '+ (price[i] / 100) +' 元</p>'+
                              '</div>'+
                              '<div class="weui-cell__ft">左滑删除</div>'+
                            '</div>'+
                          '</div>'+
                          '<div class="weui-cell__ft">'+
                            '<a class="weui-swiped-btn weui-swiped-btn_warn delete-swipeout" href="javascript:remove('+ i +')">删除</a>'+
                          '</div>'+
                        '</div>').appendTo('#list');
                        add.swipeout();
                    }
                    $("#list_box").css("display","block");


                }
            },
            error: function(err){
                $.alert(JSON.stringify(error));
            }
        });
    };

    var remove = function remove(index){
        price.splice(index, 1);
        update();
    };
    </script>
</body>
</html>
